<template>
	<div
		class="form-item"
		:class="[
			{
				inline,
			},
		]"
	>
		<div class="label" v-if="showLabel">
			<span style="margin-right: 10rpx; color: red" v-if="required || code.length > 0">*</span>
			{{ label }}
		</div>
		<span style="margin-right: 10rpx; color: red" v-if="required && !showLabel">*</span>
		<div class="value">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import vDivider from "@/components/divider/index.vue"

export default {
	name: "form-item",
	props: {
		label: {
			type: String,
			default: "",
		},
		inline: {
			type: Boolean,
			default: false,
		},
		required: {
			type: Boolean,
			default: false,
		},
		showLabel: {
			type: Boolean,
			default: true,
		},
		code: {
			type: String,
			default: "",
		},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {},
	components: {
		vDivider,
	},
}
</script>

<style lang="scss" scoped>
.form-item {
	padding: 20rpx 0;
	margin: 0 25rpx;
	border-bottom: 1px solid #f4f4f4;
	width: 100%;
	display: flex;
	// justify-content: flex-start;
	align-items: center;
	gap: 10rpx;
	.label {
		overflow: hidden;
		// white-space: nowrap;
		flex: none;
		width: 150rpx;
	}
	.value {
		display: flex;
		// justify-content: flex-end;
		align-items: center;
		flex: 1;
	}

	&.inline {
		flex-direction: column;
		align-items: flex-start;
		.label {
			width: 100%;
		}
		.value {
			width: 100%;
		}
	}
}
</style>
